<template>
  <div class="page-container page-container-detail-page">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>其他类促销</el-breadcrumb-item>
        <el-breadcrumb-item>预售详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--审核弹框-->
    <el-dialog title="管理员备注"  class="el-dialog-style" :visible.sync="dialogVisibleAdmin" :close-on-click-modal="false" @closed="handleClose">
      <el-form :model="adminDataForm" :rules="adminDataFormRules" ref="adminDataForm" label-width="100%" :size="size" label-position="right" inline>
        <el-form-item prop="auditRemark"  class="textarea">
          <el-input clearable
            type="textarea"
            placeholder="请输入备注"
            v-model="adminDataForm.auditRemark"
            :rows="4">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="submitFormAdminNotPass" class="cancelButton">不通过</el-button>
        <el-button :size="size" class="searchButton" @click.native="submitFormAdmin">通过</el-button>
      </div>
    </el-dialog>

    <!--工具栏-->
    <div class="page-container-detail">
      <p class="pageName">预售详情</p>
    <div class="toolbar" >
      <el-form :inline="true" :model="filters" :size="size" ref="filters" >
          <el-form-item >
            <span class="color333 font18 ">活动名称：</span>
            <span class="color333 font18">{{activityData.promName}}</span>
          </el-form-item>
          <el-form-item >
            <span class="color333 font18 ">活动ID：</span>
            <span class="color333 font18">{{activityData.promotionCode}}</span>
          </el-form-item>
          <el-form-item >
            <span class="color333 font18 ">当前状态：</span>
            <span class="color333 font18" v-if="activityData.status == 0">待提交</span>
            <span class="color333 font18" v-else-if="activityData.status == 1">待提交</span>
            <span class="color333 font18" v-else-if="activityData.status == 2">待审核</span>
            <span class="color333 font18" v-else-if="activityData.status == 3">未开始</span>
            <span class="color333 font18" v-else-if="activityData.status == 4">审核不通过</span>
            <span class="color333 font18" v-else-if="activityData.status == 5">进行中</span>
            <span class="color333 font18" v-else-if="activityData.status == 6">已过期</span>
            <span class="color333 font18" v-else-if="activityData.status == 7">已关闭</span>
            <span class="color333 font18" v-else-if="activityData.status == 8">已结算</span>
            <span class="color333 font18" v-else-if="activityData.status == 9">草稿</span>
            <span class="color333 font18" v-else-if="activityData.status == 10">模板状态</span>
            <span class="color333 font18" v-else-if="activityData.status == 11">审核通过</span>
            <span class="color333 font18" v-else>未知状态</span>
          </el-form-item>
      </el-form>
      <el-form :inline="true" :model="filters" :size="size" ref="filters" >
         <el-row class="search-button">
          <span v-if="activityData.status == 2">
            <kt-button class="searchButton" :size="size" @click="shenheHuodong" perms="market:presell:verify" label="审核"/>
          </span>
          <span v-if="activityData.status == 1 || activityData.status == 4">
            <kt-button class="searchButton" :size="size" @click="submitShenheHuodong" perms="market:presell:submit" label="提交审核"/>
          </span>
          <!-- <span>
           <div  v-if="activityData != 9">
             <kt-button class="resetButton" :size="size" @click="showSaveTemplate" perms="market:presell:addtemp" label="保存模板"/>
           </div>
          </span> -->
         </el-row>
       </el-form>
    </div>
    <div class="tab-container tab-container-noPadding">
        <el-tabs type="border-card">
          <el-tab-pane label="促销规则">
            <div>
              <form class="form-horizontal ">
                  <div class="basicInfo">基本信息：</div>
                  <div class="form-group">
                      <label class="color333 font16 ml32" ng-show="promotionDetailContent.promotionMethod != 17">活动名称：</label>
                      <div class="color333">
                          {{activityData.promName}}
                      </div>
                  </div>
                   <div class="form-group">
                    <label class="color333 font16 ml32" >活动时间：</label>
                    <div class="color333">
                      {{activityData.startTime}} 至 {{activityData.endTime}}
                    </div>
                  </div>
                    <div class="form-group">
                      <label class="color333 font16 ml32">活动搜索词：</label>
                      <div class="color333">
                          {{activityData.searchKeyword}}
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="color333 font16 ml32">活动费用预算：</label>
                      <div class="color333">
                          {{activityData.budget}} 元
                      </div>
                  </div>
                    <div class="form-group">
                      <label class="color333 font16 ml32">预警比例：</label>
                      <div class="color333">
                          {{activityData.warningNum}} %
                      </div>
                  </div>
                  
                 
                  <div class="basicInfo">活动规则：</div>
                  <div class="form-group ng-scope">
                    <label class="color333 font16 ml32">活动类型：</label>
                    <div class="color333">
                      {{getFrontPromType(activityData.frontPromType)}}
                    </div>
                  </div>
                  <!-- <div class="form-group">
                      <label class="color333 font16" >定金支付时间：</label>
                      <div class="color333">
                          {{activityData.frontMoneyPayTimeStart}} 至 {{activityData.frontMoneyPayTimeEnd}}
                      </div>
                  </div>
                  <div class="form-group" v-if="activityData.frontPromType == 17">
                    <label class="color333 font16" >尾款支付时间：</label>
                    <div class="color333">
                      {{activityData.tailMoneyPayTimeStart}} 至 {{activityData.tailMoneyPayTimeEnd}}
                    </div>
                  </div> -->
                  <div class="form-group">
                    <label class="color333 font16 ml32" >发货时间：</label>
                    <div class="color333">
                      {{activityData.sendGoodsTime}}
                    </div>
                  </div>
                  <!-- <div class="form-group">
                    <label class="color333 font16">定金是否可退：</label>
                    <div class="color333">
                      <span  v-if="activityData.isRefundFrontMoney==true" class="ng-binding ng-scope">是</span>
                      <span  v-else class="ng-binding ng-scope">否</span>
                    </div>
                  </div> -->
                  <!-- <div class="form-group flexBox">
                    <label class="color333 font16 ml32 titleText">活动描述：</label>
                    <div class="color333">
                      {{activityData.description}}
                    </div>
                  </div> -->
                  <div class="basicInfo">交易规则：</div>
                  <!-- <div class="form-group">
                    <label class="color333 font16 ml32">是否包邮：</label>
                    <div class="color333">
                      <span  v-if="activityData.isRefundFrontMoney == true" class="ng-binding ng-scope">是</span>
                      <span  v-else class="ng-binding ng-scope">否</span>
                    </div>
                  </div> -->
                  <!-- <div class="form-group">
                    <label class="color333 font16">是否分摊：</label>
                    <el-row class="color333 " >
                      <span  v-if="activityData.costAllocationFlag == 1" class="ng-binding ng-scope">是</span>
                      <span  v-else class="ng-binding ng-scope">否</span>
                    </el-row>
                    <el-row class="color333 " v-if="activityData.costAllocationFlag == 1">
                      <span>母平台分摊比例：</span><span class="ng-binding ng-scope">{{activityData.parentAllocationScale}}</span><span>%</span>
                      <span>子平台分摊比例：</span><span class="ng-binding ng-scope">{{activityData.childAllocationScale}}</span><span>%</span>
                      <span>商家分摊比例：</span><span class="ng-binding ng-scope">{{activityData.merchantAllocationScale}}</span><span>%</span>
                      <span>店铺分摊比例：</span><span class="ng-binding ng-scope">{{activityData.storeAllocationScale}}</span><span>%</span>
                    </el-row>
                  </div> -->
                  <div class="form-group" v-if="deptType != 3">
                    <div class="color333 font16 ml32">是否分摊：</div>
                    <div class="color333">
                      <span v-if="activityData.costAllocationFlag == 1">是</span>&nbsp;&nbsp;&nbsp;
                      <span v-if="activityData.costAllocationFlag == 2">否</span>&nbsp;&nbsp;&nbsp;
                    </div>
                  </div>

                  <div class="basicInfo">
                      参与条件：
                  </div>
                  <div ng-controller="activitiObjDetailCtrl" class="ng-scope">
                    <!--活动渠道-->
<!--                    <div class="form-group ng-scope" ng-if="promotionDetailContent.channelCodes.length > 0">-->
<!--                        <label class="col-sm-2 control-label ng-binding">活动渠道</label>-->

<!--                        <div class="col-sm-10 pdt3px">-->
<!--                          <span v-for="(item) in (activityData.channelCodes + '').split('|')" :key="item" class="ng-binding ng-scope">{{getChannelCodes(item)}} &nbsp;</span>-->
<!--                            &lt;!&ndash; <span ng-repeat="channel in promotionDetailContent.channelCodes" class="ng-binding ng-scope">BBC &nbsp;</span> &ndash;&gt;-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="form-group">
                      <label class="color333 font16 ml32">新老用户：</label>
                      <div class="color333">
                        <span ng-repeat="userScope in promotionDetailContent.userScopeList" class="ng-binding ng-scope" v-show="activityData.proUserType == 0 || activityData.proUserType == '1,2'">新用户 &nbsp;老用户</span>
                        <span ng-repeat="userScope in promotionDetailContent.userScopeList" class="ng-binding ng-scope"  v-show="activityData.proUserType == 1">新用户 &nbsp;</span>
                        <span ng-repeat="userScope in promotionDetailContent.userScopeList" class="ng-binding ng-scope"  v-show="activityData.proUserType == 2">老用户 &nbsp;</span>
                      </div>
                    </div>
                    <div class="form-group" v-if="activityData.memTypes != null">
                      <label class="color333 font16 ml32">会员类型：</label>
                      <div class="color333">
                      <span
                        v-for="item in (activityData.memTypes + '').split(
                          ','
                        )"
                        :key="item"
                        class="ng-binding ng-scope"
                      >
                        <span v-if="item == 1">
                        普通会员 &nbsp;
                        </span>
                        <span v-if="item == 2">
                        we2000 &nbsp;
                        </span>
                        <span v-if="item == 3">
                        分期会员 &nbsp;
                        </span>
                      </span>
                      </div>
                    </div>
                    <div class="form-group" v-if="activityData.channelId != null">
                      <label class="color333 font16 ml32">渠道入口：</label>
                      <div class="color333">
                      <span
                        v-for="item in (activityData.channelId + '').split(
                          ','
                        )"
                        :key="item"
                        class="ng-binding ng-scope"
                      >
                        <span v-if="item == 1">
                        企业微信 &nbsp;
                        </span>
                        <span v-if="item == 2">
                        xxx &nbsp;
                        </span>
                        <span v-if="item == 2">
                        yyy &nbsp;
                        </span>
                      </span>
                      </div>
                    </div>
                    
<!--                    <div class="line line-dashed b-b line-lg" ng-show="canShowActivityPlatformLimitShow()"></div>-->
<!--                    <div class="form-group ng-scope" ng-if="canShowActivityPlatformLimitShow()">-->
<!--                        <label class="col-sm-2 control-label ng-binding">活动平台</label>-->

<!--                        <div class="col-sm-10 pdt3px">-->
<!--                          <span v-for="(item) in (activityData.proPlatform + '').split('|')" :key="item" class="ng-binding ng-scope">{{getProPlatform(item)}} &nbsp;</span>-->
<!--                        </div>-->
<!--                    </div>-->
                    <!-- <div class="form-group">
                      <label class="color333 font16 ml32">店铺地区：</label>
                      <div class="color333">
                        全国
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="color333 font16 ml32">商家地区：</label>
                      <div class="color333">
                        全国
                      </div>
                    </div> -->
                  <div class="form-group">
                    <label class="color333 font16 ml64">备注：</label>
                    <div class="color333">
                      {{activityData.remark}}
                    </div>
                  </div>
<!--                    <div class="line line-dashed b-b line-lg  "></div>-->
<!--                    <div class="form-group ng-scope" ng-if="promotionDetailContent.promotionType != 12">-->
<!--                      &lt;!&ndash;备注&ndash;&gt;-->
<!--                      <label class="col-sm-2 control-label ng-binding">备注</label>-->
<!--                      <div class="col-sm-10 pdt3px themeTextColor">-->
<!--                            <quill-editor-->
<!--                            v-model="activityData.description"-->
<!--                            ref="myQuillEditor"-->
<!--                            style="height: 300px;"-->

<!--                          >{{activityData.remark}}</quill-editor>-->
<!--                      </div>-->
<!--                    </div>-->
                  </div>
                </form>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="参与商家/店铺">
            <el-tabs type="border-card">
              <el-tab-pane label="商家">
                <el-table :data="businessList" >
                  <el-table-column prop="merchantCode" label="商家编码"></el-table-column>
                  <el-table-column prop="name" label="商家名称"></el-table-column>
                  <el-table-column prop="type" label="商家类型"></el-table-column>
                </el-table>
                <div class="toolbar t_r" >
                  <el-pagination
                    @size-change="businessListHandleSizeChange"
                    @current-change="businessListHandleCurrentChange"
                    :current-page="businessListForm.pageNo"
                    :page-size="10"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="businessListTotal">
                  </el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane label="店铺">
                <el-table :data="shopList" >
                  <el-table-column prop="storecode" label="店铺编码"></el-table-column>
                  <el-table-column prop="name" label="店铺名称"></el-table-column>
                  <el-table-column prop="type" label="店铺类型"></el-table-column>
                  <el-table-column prop="merchantName" label="所属商家"></el-table-column>
                </el-table>
                <div class="toolbar t_r" >
                  <el-pagination
                    @size-change="shopListHandleSizeChange"
                    @current-change="shopListHandleCurrentChange"
                    :current-page="shopListForm.pageNo"
                    :page-size="10"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="shopListTotal">
                  </el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane> -->
          <el-tab-pane label="参与商品">
            <el-tabs type="border-card">
              <el-tab-pane :label="noMutexProductLabel">
                <el-table
                    :data="goodsList"
                    :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
                    :max-height="1500"
                    row-key="id"
                    :size="'mini'"
                    default-expand-all
                    class="tableStyle"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                  <el-table-column prop="mpCode" label="商品编号" sortable width="180" align="left"></el-table-column>
                  <el-table-column prop="mpName" label="商品名称" sortable width="180"></el-table-column>
                  <el-table-column prop="categoryName" label="商品分类" sortable width="180"></el-table-column>
                  <el-table-column prop="stock" label="库存" sortable width="180"></el-table-column>
                  <el-table-column prop="storeName" label="所属店铺" sortable width="180"></el-table-column>
                  <el-table-column prop="salePrice" label="原价（元）" sortable width="180"></el-table-column>
                  <el-table-column prop="alreadyFrontCount" label="已预订数" sortable width="180">
                    <template slot-scope="scope">
                      {{scope.row.alreadyFrontCount != null && scope.row.alreadyFrontCount != '' ? scope.row.alreadyFrontCount : '-'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="salePriceWithTax" label="一口价" sortable width="180" v-if="activityData.frontPromType != 17">
                    <template slot-scope="scope">
                      {{scope.row.salePriceWithTax != null && scope.row.salePriceWithTax != '' ? scope.row.salePriceWithTax : '-'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="salePriceWithTax" label="预售价" sortable width="180" v-if="activityData.frontPromType == 17">
                    <template slot-scope="scope">
                      {{scope.row.salePriceWithTax != null && scope.row.salePriceWithTax != '' ? scope.row.salePriceWithTax : '-'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="frontMoney" label="定金" sortable width="180" v-if="activityData.frontPromType == 17">
                    <template slot-scope="scope">
                      {{scope.row.frontMoney != null && scope.row.frontMoney != '' ? scope.row.frontMoney : '-'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="frontMoneyDeductAmount" label="定金抵扣金额" sortable width="180" v-if="activityData.frontPromType == 17">
                    <template slot-scope="scope">
                      {{scope.row.frontMoneyDeductAmount != null && scope.row.frontMoneyDeductAmount != '' ? scope.row.frontMoneyDeductAmount : '-'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="channelStoreLimit" label="店铺限购" sortable width="180">
                    <template slot-scope="scope">
                      {{scope.row.storeChannelLimit != null && scope.row.storeChannelLimit != '' ? scope.row.storeChannelLimit : '-'}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="channelIndividualLimit" label="个人限购" sortable width="180">
                    <template slot-scope="scope">
                      {{scope.row.userChannelLimit != null && scope.row.userChannelLimit != '' ? scope.row.userChannelLimit : '-'}}
                    </template>
                  </el-table-column>
                </el-table>
                <div class="toolbar t_r">
                  <el-pagination
                    @size-change="goodsListHandleSizeChange"
                    @current-change="goodsListHandleCurrentChange"
                    :current-page="goodsListForm.start"
                    :page-size="10"
                    :page-sizes="[5,10, 20, 30]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="goodsListTotal">
                  </el-pagination>
                </div>
              </el-tab-pane>
              <el-tab-pane :label="mutexProductLabel">
                <div>
                  <el-table :data="mutexProductList" row-key="id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%" @selection-change="handleSelectionChange" class="tableStyle">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="mpCode" label="商品编码" width="200"  align="left"></el-table-column>
                    <el-table-column prop="mpName" label="商品名称"  width="200"></el-table-column>
                    <el-table-column prop="categoryName" label="商品分类"  width="200"></el-table-column>
                    <el-table-column prop="stock" label="库存"  width="200"></el-table-column>
                    <el-table-column prop="salePrice" label="原价（元）"  width="200"></el-table-column>
                    <el-table-column prop="storeName" label="所属店铺"  width="200"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="400">
                      <template slot-scope="scope">
                    <el-button @click="getMutexInfo(scope.row)" v-if="scope.row.typeOfProduct==20" type="text" class="textButton" size="small">查看详情</el-button>
                    <!-- <el-button @click="renewAdd(scope.row)" v-if="scope.row.typeOfProduct==10 || scope.row.typeOfProduct==20" type="text" class="textButton" size="small">重新添加</el-button> -->
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="toolbar t_r" >
                    <el-pagination
                      @size-change="handleSizeChangeMutexProductList"
                      @current-change="handleCurrentChangeMutexProductList"
                      :current-page="mutexProductForm.start"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="mutexProductForm.limit"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="mutexProductTotal"
                    >
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <el-dialog title="添加模板" :visible.sync="saveTemplateDialog" :close-on-click-modal="false" class="el-dialog-style">
      <el-form :model="saveTemplateForm" :rules="saveTemplateFormRules" ref="saveTemplateForm" label-width="130px">
        <el-form-item label="模板名称："  prop="templateName">
          <el-input clearable placeholder="输入模板名称" v-model="saveTemplateForm.templateName" size="mini" maxlength="60"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="saveTemplateDialog=false" size="mini" class="cancelButton">取消</el-button>
        <el-button type="primary" @click="saveTemplate(0)" size="mini" class="searchButton">确定</el-button>
      </div>
    </el-dialog>

    <!-- 互斥活动详情 -->
    <el-dialog :visible.sync="mutexPromotionVisible" title="互斥活动详情" width="70%">
      <div>
        <el-table :data="mutexPromotionList" ref="multipleTable" :row-class-name="tableRowClassName" :size="size">
          <el-table-column prop="promotionCode" width="280" label="互斥活动编码" sortable align="center"></el-table-column>
          <el-table-column prop="promName"  width="150" label="互斥活动名称" align="center">
            <template slot-scope="scope">
              <el-button @click="linkInfoByMutexProduct(scope.row.promotionId,scope.row.promType)" type="text" class="textButton" size="small">{{scope.row.promName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="goodsCategory"  width="350" label="互斥活动时间" align="center">
            <template slot-scope="scope">
                <span>{{scope.row.startTime}} - {{scope.row.endTime}}</span>
              </template>
          </el-table-column>
          <el-table-column prop="storeName" label="活动状态" align="center">
            <template slot-scope="scope">
              <span class="color333 font18" v-if="scope.row.status == 0">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 1">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 2">待审核</span>
              <span class="color333 font18" v-else-if="scope.row.status == 3">未开始</span>
              <span class="color333 font18" v-else-if="scope.row.status == 4">审核不通过</span>
              <span class="color333 font18" v-else-if="scope.row.status == 5">进行中</span>
              <span class="color333 font18" v-else-if="scope.row.status == 6">已过期</span>
              <span class="color333 font18" v-else-if="scope.row.status == 7">已关闭</span>
              <span class="color333 font18" v-else-if="scope.row.status == 8">已结束</span>
              <span class="color333 font18" v-else-if="scope.row.status == 9">活动草稿</span>
            </template>
          </el-table-column>
          <el-table-column prop="creatorName" label="创建人" align="center"></el-table-column>
          <el-table-column prop="deptName"  label="创建组织" align="center"></el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar t_r">
          <el-pagination
            @size-change="mutexPromotionListSizeChange"
            @current-change="mutexPromotionListCurrentChange"
            :current-page="mutexPromotionForm.start"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="mutexPromotionForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="mutexPromotionListTotal"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer t_c">
        <el-button  :size="size" @click.native="mutexPromotionVisible = false" class="searchButton">关闭</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from 'color-name';
import tabPane from './components/TabPaneCreateGroupon'
import qs from 'qs';
import { promTypeConverter, frontPromTypeConverter,channelCodeConverter,proPlatformConverter, proUserTypeConverter,proMemberTypeConverter ,proMemberLevelConverter} from "@/market/dict/marketDict";
import marketRequest from "@/market/request/marketRequest";

export default {
  name: 'Tab',
  components: {
    tabPane ,
    KtButton,
    TableColumnFilterDialog,
    marketRequest
  },
  data() {
    return {
      tableDataData:[],
      adminDataForm:{
        auditRemark:""
      },
      adminDataFormRules: {
        auditRemark: [
          {required: true, message: "审核意见不能为空！", trigger: "change"}
        ]
      },
      dialogVisibleAdmin: false,
      size: "small",
      filters: {},
      multipleSelection: [],
      businessList: [],
      businessListForm:{
        pageNo: 1,
        pageSize: 10,
        promotionId: null,
        merchantType: 1,
      },

      businessListTotal:0,


      shopList: [],
      shopListForm:{
        pageNo: 1,
        pageSize: 10,
        promotionId: null,
        merchantType: 2,
      },
      shopListTotal: 0,

      tableData: [{
        "id": 1912250010887324,
        "productName": "新供应商001",
        "unit": '件',
        "shopName": '张小二服饰',
        "price": 1.2,
        "markdown": 1,
        "shopLimit1": 100,
        "shopLimit2": 100,
        "shopLimit3": 100,
      }],
      promotionId: this.$route.query.value,
      activityData: {

      },
      channelList: [{childName:"卡奥斯运营平台",id:"179",children:[]}],
      defaultPropsChannel: [],
      goodsList:[],
      goodsListForm:{
        start: 1,
        limit: 10,
        promotionId: null,
        frontPromType: null,
        storeIds: []
      },
      goodsListTotal: 0,

      saveTemplateFlag: 0,
      saveTemplateForm: {
        promotionId: null,
        templateName: '',
      },
      saveTemplateFormRules: {
        templateName: [
            { required: true, message: "请输入模板名称",trigger:"blur" },
            { required: true, message: "请输入模板名称",trigger:"change" },
            { max: 60, message: "模板名称最多60字符", trigger: "blur" },
            { max: 60, message: "模板名称最多60字符", trigger: "change" }
        ],
      },
      saveTemplateDialog: false,

      formLabelWidth: '180px',
      deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型

      noMutexProductLabel:"生效商品（0）",
      mutexProductForm:{
        promotionId: this.$route.query.value,
        mutexFlag:1,//互斥标识
        start: 1,
        limit: 10
      },
      mutexProductList:[],
      mutexProductTotal:0,
      mutexProductLabel:"互斥商品（0）",
      mutexPromotionForm:{
        promotionId: this.$route.query.value,
        start:1,
        limit:10,
      },
      mutexPromotionList:[],
      mutexPromotionListTotal:0,
      mutexPromotionVisible:false,
      levelList: [],
    };
  },
  created: function(){
      let _this = this;
      let callback = res => {

        if (res.code == "0000") {
          _this.activityData = res.data;
          // _this.queryTagNameById( _this.activityData.labelId);
          // let getLevelListCallback = function(){
          //   _this.getLevelList(res.data.channelCodes);
          // }
          // _this.queryChildList(_this.activityData.channelCodes,getLevelListCallback);
          // //根据渠道code获取
          // if(res.data.channelCodes != null){
          //   if(res.data.channelCodes.split(",").indexOf("179") == -1){
          //     res.data.channelCodes = "179," + res.data.channelCodes;
          //   }
          // }
        }else{
          //alert("获取促销详情失败");
        }
      };
      let params = {"id": this.$route.query.value};
      this.utils.request.promotionDetailById(params, callback);

      this.goodsListForm.promotionId = this.$route.query.value;
      this.businessListForm.promotionId = this.$route.query.value;
      this.shopListForm.promotionId = this.$route.query.value;

      // this.mainMerchantFormFind();
      // this.mainStoreTableDataFormFind();
      this.goodsPageQuery();
      this.getMutexProductList();

      // this.queryChildList();
  },
  methods: {
    getLevelList(channelCodes){
      if(this.deptType == 0){
        //母平台
        channelCodes.split(",").forEach(item=>{
          let name = this.getChannelCodes(item);
          //获取等级
          this.activityData.promotionMemberGradeList.forEach(levelList=>{
            if(levelList.platformId == item){
              if(levelList.levelCodeList == null || levelList.levelCodeList.length < 1){
                this.levelList.push({"childName":name,"childLevelList":"全部"})
              }else{
                this.utils.request.queryMemLevelListByIds({ids:levelList.levelCodeList},res=>{
                  let levelRstList = []
                  res.data.forEach(level=>{
                    levelRstList.push(level.levelName.length >= 6 ? level.levelName.slice(0,5)+"..." : level.levelName);
                  })
                  if(item == '179'){
                    this.levelList.unshift({"childName":name,"childLevelList":levelRstList.join("|")})
                  }else{
                    this.levelList.push({"childName":name,"childLevelList":levelRstList.join("|")})
                  }
                })
              }
            }
          })
        })
      }else{
        let user = localStorage.getItem("user");
        let userInfo = JSON.parse(user);
        if (this.activityData.promotionMemberGradeList == null || this.activityData.promotionMemberGradeList.length < 1 || this.activityData.promotionMemberGradeList[0].levelCodeList == null){
          this.levelList.push({"childName":userInfo.deptName,"childLevelList":"全部"})
        }else {
          this.utils.request.queryMemLevelListByIds({ids:this.activityData.promotionMemberGradeList[0].levelCodeList},res=>{
            let levelRstList = []
            res.data.forEach(level=>{
              levelRstList.push(level.levelName.length >= 6 ? level.levelName.slice(0,5)+"..." : level.levelName);
            })
            this.levelList.push({"childName":userInfo.deptName,"childLevelList":levelRstList.join("|")})
          })
        }
      }
    },
    queryTagNameById(id){
      let that = this;
      this.utils.request.getTagList({},res=>{
        let tagsL = res.data.rows;
        tagsL.forEach((id, index) =>{
          if(id == tagsL[index].tagName){
            this.activityData.tagName = tagsL[index];
          }
        });

      })
    },
    // 获取子平台列表
    queryChildList(channelCodes,callback){
      let that = this;
      this.utils.request.queryChildList({},res=>{
        if(res.code == '0000' && res.data && res.data.length > 0){
          if(null != channelCodes && channelCodes != ''){
            let channelCodesStr = channelCodes.split(',');
            channelCodesStr.forEach(item =>{
              res.data.forEach(item1 =>{
                this.channelList.push(item1);
                // if(item1.id == item){
                //   that.channelList[0].children.push(item1);
                // }
              })
            })


            if (callback != null){
              callback();
            }


          }

        }
      })
    },

    //table的双色条纹
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    submitFormAdminNotPass(){
          let this_ = this;
          // if(null == this.adminDataForm.auditRemark || this.adminDataForm.auditRemark == ""){
          //   this.$message({ message: "审核不通过必须填原因", type: "fail" });
          //   return;
          // }
          let callback = res => {
            if(res.code == '0000') {
              this_.activityData.status = 4;
              this_.dialogVisibleAdmin = false;

            }else {
              this_.$message({ message: res.msg, type: "fail" });
            }
          };
          this.adminDataForm.id = this.promotionId;
          this.adminDataForm.status = 4;
      this.$refs['adminDataForm'].validate(valid => {
        if (valid) {
          this.utils.request.reviewPromotion(this.adminDataForm, callback);
        }
      });
    },
    submitFormAdmin(){
      let this_ = this;
      this.dialogVisibleAdmin = false;

      let callback = res => {
          if(res.code == '0000') {
            this_.activityData.status = 11;

          }else {
            this_.$message({ message: res.msg, type: "fail" });
          }
      };
      this.adminDataForm.id = this.promotionId;
      this.adminDataForm.status = 11;
      this.utils.request.reviewPromotion(this.adminDataForm, callback);
    },

    submitShenheHuodong(){
      let this_ = this;
      this.$confirm("确认提交审核？", "提示", {
        type: "warning"
      })
        .then(() => {
          let callback = res => {

            if(res.code == '0000'){
              this_.activityData.status=2;

            }else {
              this_.$message({ message: res.msg, type: "fail" });
            }
          };
          let param ={};
          param.id    =this.promotionId;
          param.status         =2;

          this.utils.request.reviewPromotion(param,callback);

        })
        .catch(() => {
        });
    },

    shenheHuodong(){
      if (this.$refs['adminDataForm'] != undefined) {
        this.$refs['adminDataForm'].resetFields();
      }
      this.dialogVisibleAdmin = true;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    createPage(){
      this.$router.push("/CreatePromotion");
    },
    getProPlatform(code){
      return proPlatformConverter(code);
    },
    getProUserType(code){
      return proUserTypeConverter(code);
    },
    getChannelCodes(code){
      let item = this.channelList.find(function(item, index) {
        return item.id == code;
      });
      return typeof item == "undefined" ? "" : item.childName;
      // return channelCodeConverter(code);
    },
    // getChannelCodes1(code) {
    //   let item = this.channelList.find(function(item, index) {
    //     return item.id == code;
    //   });
    //   return typeof item == "undefined" ? "" : item.childName;
    // },
    getFrontPromType(code){
      return frontPromTypeConverter(code)
    },
    getProMemberType(code){
      return proMemberTypeConverter(code)
    },
    getProMemberLevel(code){
      return proMemberLevelConverter(code)
    },


    businessListHandleSizeChange(val){
      this.businessListForm.pageSize = val;
      this.mainMerchantFormFind();
    },
    businessListHandleCurrentChange(val){
      this.businessListForm.pageNo = val;
      this.mainMerchantFormFind();
    },
    //查询绑定关系的商家
    mainMerchantFormFind(){
      var this_ = this;
      let params ={"promotionId" : this.promotionId, "merchantType": "1"};

      this.utils.request.promotionMerchantList(this.businessListForm, function (res) {
        if (res.code == "0000") {
          this_.businessListTotal = res.data.totalCount;
          this_.businessList = res.data.list.map((ele, index) => {
            let merchant = {};
            merchant.id = ele.id;
            merchant.name = ele.merchantName;
            merchant.type = ele.merchantTypeManager == '1' ? '自营商家' : '第三方商户';
            merchant.merchantCode = ele.merchantCode;
            return merchant
          })

        }
      });

    },

    shopListHandleSizeChange(val){
      this.shopListForm.pageSize = val;
      this.mainStoreTableDataFormFind();
    },
    shopListHandleCurrentChange(val){
      this.shopListForm.pageNo = val;
      this.mainStoreTableDataFormFind();
    },
     //查询绑定关系的店铺
    mainStoreTableDataFormFind(){
      var  this_ = this;
      this.utils.request.promotionMerchantList(this.shopListForm, function (res) {
        if (res.code == "0000") {
            this_.shopListTotal = res.data.totalCount;
            this_.shopList = res.data.list.map((ele, index) => {
            let store = {};
            store.id = ele.storeId;
            store.name = ele.storename;
            store.type = ele.storeType == '1' ? "线上店铺" : "线下店铺";
            store.storecode = ele.storecode;
            store.merchantName = ele.merchantName;
            return store
          })
        }
      });
    },

    //-----------------------------商品--------------------
    goodsListHandleCurrentChange(val){
      this.goodsListForm.start = val;
      this.goodsPageQuery();
    },
    goodsListHandleSizeChange(val){
      this.goodsListForm.limit = val;
      this.goodsPageQuery();
    },
    // 查询商品列表
    goodsPageQuery() {
      let this_ = this;
      let callback = function (res) {

        if (res.code == "0000") {
          this_.goodsList = res.data.rows;
          this_.goodsListTotal = res.data.total;
          if(res.data.totalCount>9999){
            this_.noMutexProductLabel = "生效商品（9999+）";
          }else{
            this_.noMutexProductLabel = "生效商品（"+res.data.totalCount+"）";
          }
        } else {
        }
      };
      marketRequest.getProductListV3(this.goodsListForm, callback);
    },

    //-------------审核------------------
    //
    handleClose() {
    },

    showSaveTemplate(){
      if (this.$refs['saveTemplateForm'] != undefined) {
        this.$refs['saveTemplateForm'].resetFields();
      }
      this.saveTemplateDialog = true;
    },

    // 保存为模板
    saveTemplate(flag){
      this.$refs.saveTemplateForm.validate(valid => {
        if(valid) {
          let callback = res => {
            if(res.code == '0000'){
              this.saveTemplateFlag = 1;
              this.$message({ message: "已保存为模板", type: "success" });
              this.saveTemplateDialog = false;
            }else {
              this.$message({ message: res.msg, type: "fail" });
            }
          };
          this.saveTemplateForm.id = this.promotionId;
          this.utils.request.promotionSaveTemplate(this.saveTemplateForm, callback);
        }
      });
    },

    /**
     * 查询互斥商品
     */
    getMutexProductList() {
      var this_ = this;
      marketRequest.getProductListV3(this.mutexProductForm, res => {
        if (res.code == "0000") {
          this_.mutexProductList = res.data.rows;
          this_.mutexProductTotal = res.data.total;
          if(this_.mutexProductTotal>9999){
            this_.mutexProductLabel = "互斥商品（9999+）";
          }else{
            this_.mutexProductLabel = "互斥商品（"+res.data.totalCount+"）";
          }
        }
      });
    },
    /**
     * 每页条数改变触发
     */
    handleSizeChangeMutexProductList(val){
      this.mutexProductForm.limit = val;
      this.mutexProductForm.start = 1;
      this.getMutexProductList();
    },
    /**
     * 换页刷新
     */
    handleCurrentChangeMutexProductList(val){
      this.merchantProductSearchForm.start = val;
      this.getMutexProductList();
    },
    /**
     * 互斥商品查看详情
     */
    getMutexInfo(row){
      let that = this;
      this.mutexPromotionForm.promotionMerchantProductId = row.id;
      this.mutexPromotionForm.start = 1;
      this.mutexPromotionForm.limit = 10;
      this.getPromotionMutexListByProductId();
    },
    getPromotionMutexListByProductId(){
      let that = this;
      this.utils.request.getPromotionMutexListByProductId(this.mutexPromotionForm,res=>{
        if(res.code=='0000'){
            that.mutexPromotionList = res.data.rows;
            that.mutexPromotionListTotal = res.data.total;
            that.mutexPromotionVisible = true;
        }
      });
    },

    /**
     * 每页条数改变触发
     */
    mutexPromotionListSizeChange(val){

      this.mutexPromotionForm.limit = val;
      this.mutexPromotionForm.start = 1;
      this.getPromotionMutexListByProductId();
    },
    /**
     * 换页刷新
     */
    mutexPromotionListCurrentChange(val){

      this.mutexPromotionForm.start = val;
      this.getPromotionMutexListByProductId();
    },

    /**
     * 互斥商品重新添加
     */
    renewAdd(row){

      let that = this;
      let param = {};
      var productIdList = [];
      param.promotionId = row.promotionId;
      param.promotionType = 1;
      if(row.typeOfProduct == '10'){
          //spu
          productIdList.push(row.id);
          row.children.forEach(item=>{
            productIdList.push(item.id);
          })
      }else if(row.typeOfProduct == '20'){
        productIdList.push(row.id);
      }
      param.productIdList = productIdList;
      this.utils.request.renewAddMutexProduct(param,res=>{
        if(res.code=='0000'){
          that.getMutexProductList();
          that.goodsPageQuery();
          let data = res.data;
          if(data.businessCode == '0001'){
              that.$message({message: data.businessMsg, type: "success"});
          }else if(data.businessCode == '0002'){
              that.$message({message:data.businessMsg, type: "error"})
          }else if(data.businessCode == '0003'){
              that.$alert(data.businessMsg, '提示', {
              confirmButtonText: '知道了',
              callback: action => {}
              });
          }
        }
      });
    },
    /**
     * 点击活动名称跳转详情
     */
    linkInfoByMutexProduct(promotionId,type){
      if(type == 1){
        this.$router.push({ path: "/SinglePromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/SinglePromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 2){
        this.$router.push(`/FullNumPromotionDetailNew?id=${promotionId}&auth=0`);
      }else if(type == 3){
        this.$router.push({ path: "/FullPromotionDetailNew/" + promotionId + "/0"});
        //this.$router.push(`/FullPromotionDetailNew?id=${promotionId}&auth=0`);
      }else if(type == 4){
        this.$router.push(`/SeckillDetail?promotionId=${promotionId}`);
      }else if(type == 5){
        this.$router.push({ path: "/GiftPromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/GiftPromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 6){
        this.$router.push({ path: "/ComplexPromotionInfo/" + promotionId});
      }else if(type == 7){
        this.$router.push({ path: "/XofferPromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/XofferPromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 8){
        this.$router.push({ path: "/IncreasePromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/IncreasePromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 9){
        this.$router.push(`/QueryPresellPromotion?value=${promotionId}&auth=0`);
      }else if(type == 10){
        this.$router.push("/GroupDetailPromotion?id=" + `${promotionId}`);
      }else if(type == 12){
        this.$router.push(`/QueryPromotion?value=${promotionId}&auth=0`);
      }
    }

  },
  mounted() {

    // let callback2 = res => {tList(param2, callback2);
    this.goodsListHandleCurrentChange(1);
  }
};
</script>

<style scoped lang="scss">
@import '../../../assets/css/public.scss';
.ml32{
  margin-left: 32px !important;
}
.ml64{
  margin-left: 64px !important;
}
.w80{
  width:80px
}
.pdl30{
  padding-left: 30px;
}
.lh25{
  line-height: 25px;
}
.pdl60{
  padding-left: 60px;
}
.w144{
  width: 144px;
}
.oe{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.width100{
  width: 97px;
}
.width120{
  width: 150px;
}
.mr10{
  margin-right: 10px;
}
.mb10{
  margin-bottom: 10px;
}
.ml33{
  margin-left: 33px;
}
.pdl30{
  padding-left: 30px;
}
.pdt20{
  padding-top: 20px;
}
</style>
